<!--
 * @Author: pjji
 * @describe: 菜单导航
 * @LastEditTime: 2020-12-03 16:01:29
-->
<template>
	<div class="navMenu">
		<div class="scrollbar"></div>
		<el-menu v-if="menuListData && menuListData.length"
				 unique-opened
				 :default-openeds="openeds"
				 class="menu-nav"
				 :default-active="defaultActive"
				 @open="handleOpen"
				 @close="handleClose"
				 @select="handleSelect">
			<template v-for="menu in menuListData"
					  v-if="menu.url">
				<el-submenu v-if="menu.items && menu.items.length > 0"
							:index="menu.url">
					<template slot="title">
						<i :class="menu.icon"></i>
						<span>{{menu.title}}</span>
					</template>
					<el-menu-item v-for="(menuChildren, j) in menu.items"
								  :index="menuChildren.url"
								  :key="menuChildren.code">
						{{menuChildren.title}}
					</el-menu-item>
				</el-submenu>
				<el-menu-item v-else
							  :key="menu.code"
							  :index="menu.url">
					<i :class="menu.icon"></i>
					<span slot="title">{{menu.title}}</span>
				</el-menu-item>
			</template>
		</el-menu>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import _ from "lodash";
export default {
	data () {
		return {
			defaultActive: 'tjzb', //默认选定菜单
			firstLoad: 0,
			openeds: ['/publicity'],
		}
	},
	computed: {
		...mapState({
			menuListData: state => state.menuData,
		}),
		//当前路由name
		routeName () {
			return this.$route.name;
		},
		//当前路由url
		routePath () {
			return this.$route.path;
		}
	},

	methods: {
		handleOpen (key, keyPath) {
			// console.log(key, keyPath);
		},
		handleClose (key, keyPath) {
			// console.log(key, keyPath);
		},
		//菜单切换回调
		handleSelect (key, keyPath) {
			console.log(key, keyPath);
			const url = keyPath[keyPath.length - 1];
			if (this.routePath != url) {
				this.$router.push(url)
			}
		},
		//更新默认菜单高亮
		updateDefaultActive (url) {
			this.defaultActive = url;
		},
		//初始化菜单
		initMenu () {
			if (this.menuListData.length) {
				let firstMenu = this.menuListData[0].items[0].url;
				let PATH = this.$route.path === '/blank' ? firstMenu : this.defaultActive;//重定向至第一个菜单
				(PATH && this.routePath != PATH) && this.$router.push(PATH); //刷新路由
				// PATH && this.$router.push(PATH); //刷新路由
			}
		},
	},
	watch: {
		'$route' (val) {
			this.firstLoad++;
			this.firstLoad == 1 && this.updateDefaultActive(val.path); //更新高亮， 仅第一次加载时
		},
		menuListData: {
			handler (val, oldval) {
				console.log(val);
				this.initMenu();
			},
			deep: true
		}
	}
}
</script>

<style lang="scss" scoped>
.navMenu {
	position: relative;
	user-select: none;
	// margin: 0 auto 60px;
	width: 160px;
	// height: calc(100% - #{$footerHeight} - 65px);
	height: 100%;
	overflow-y: auto;
	background-color: $content-bg;
	&::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}
	&::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: #317fff;
		background-image: -webkit-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent
		);
	}
	&::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ededed;
		border-radius: 10px;
	}
	.nav-title {
		display: flex;
		align-items: center;
		padding-left: 24px;
		cursor: default;
		color: white;
		text-align: center;
		font-size: 18px;
		line-height: 60px;
		img {
			width: 30px;
			margin-right: 10px;
			height: 30px;
		}
	}
	:deep(.el-menu)  {
		background-color: $content-bg;
		.el-menu-item.is-active {
			border-left: 5px solid #00c0ff;
			box-sizing: border-box;
			padding-left: 35px !important;
	        background: linear-gradient(to right, #2ab1e8 0%, #35d1ce 100%);
			color: $content-bg;
		}
		.el-menu-item {
			transition: none;
		}
		.el-submenu {
			.el-menu-item {
				min-width: 150px;
			}
		}
	}
}
</style>
